import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:sticky_headers/sticky_headers/widget.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/svg.dart';
import 'package:yi_shop/utils/tools.dart';

class MineFootmarkController extends GetxController with GetSingleTickerProviderStateMixin {
  RxBool isDeleted = false.obs;

  RxBool isAll = false.obs;

  late AnimationController animationController;

  late Animation<Offset> offsetAnimation;

  final Duration duration = const Duration(milliseconds: 500);

  @override
  void onInit() {
    animationController = AnimationController(vsync: this, duration: duration);
    offsetAnimation = Tween<Offset>(
      end: Offset.zero,
      begin: const Offset(0, 1.1),
    ).animate(CurvedAnimation(
      parent: animationController,
      curve: Curves.linear,
    ));
    animationController.forward();
    super.onInit();
  }

  @override
  void onClose() {
    animationController.dispose();
    super.onClose();
  }
}

class MineFootmarkPage extends GetView<MineFootmarkController> {
  const MineFootmarkPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        leading: ToolsUtils.builderLeading(),
        title: Text(
          '我的足迹',
          style: StylesUtils.customTextStyle(
              fontSize: StylesUtils.fontSize18, fontWeight: FontWeight.w700),
        ),
        actions: [
          TextButton(onPressed: () {
            if (controller.isDeleted.isFalse) {
              controller.animationController.forward();
            } else {
              controller.animationController.reverse();
            }
            Get.engine.addPostFrameCallback((timeStamp) {
              Future<void>.delayed(controller.duration,
                  () => controller.isDeleted.value = !controller.isDeleted.value);
            });
          }, child: Obx(() {
            if (controller.isDeleted.isTrue) {
              return Text(
                '完成',
                style: StylesUtils.customTextStyle(),
              );
            }
            return SvgUtils.assetName('u15789', width: 19, height: 20);
          }))
        ],
      ),
      body: ListView.builder(
        itemBuilder: (_, int index) {
          return StickyHeader(
            header: Container(
              height: 40,
              color: Colors.white,
              alignment: Alignment.centerLeft,
              padding: const EdgeInsets.only(left: 15),
              child: Text(
                '5月30日',
                style: StylesUtils.customTextStyle(color: ColorsUtils.color9999),
              ),
            ),
            content: Container(
              padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
              child: StaggeredGrid.count(
                crossAxisCount: 2,
                crossAxisSpacing: 15,
                mainAxisSpacing: 20,
                children: [
                  for (var i = 0; i < 20; i++)
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.circular(5),
                          child: CachedNetworkImage(
                            imageUrl:
                                'https://img.alicdn.com/bao/uploaded/i4/1940112101/O1CN01RJUmap1ROItTF42kH_!!0-item_pic.jpg',
                            width: double.infinity,
                            height: 100,
                            fit: BoxFit.fill,
                          ),
                        ),
                        Container(
                          alignment: Alignment.centerLeft,
                          margin: const EdgeInsets.symmetric(vertical: 10),
                          child: Text(
                            '办公桌简易桌子卧室台式',
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                          ),
                        ),
                        Wrap(
                          spacing: 20,
                          crossAxisAlignment: WrapCrossAlignment.center,
                          alignment: WrapAlignment.start,
                          children: [
                            Text(
                              '¥129',
                              style: StylesUtils.customTextStyle(color: ColorsUtils.colorF048),
                            ),
                          ],
                        )
                      ],
                    ),
                ],
              ),
            ),
          );
        },
        itemCount: 35,
      ),
      bottomNavigationBar: bottomBar(),
    );
  }

  Widget bottomBar() {
    return Obx(() => Visibility(
          visible: controller.isDeleted.value,
          maintainState: true,
          maintainAnimation: true,
          child: SizedBox(
            height: 50,
            child: SlideTransition(
              position: controller.offsetAnimation,
              child: Container(
                color: Colors.white,
                alignment: Alignment.centerLeft,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Expanded(
                        child: Padding(
                      padding: const EdgeInsets.only(left: 15),
                      child: Wrap(
                        crossAxisAlignment: WrapCrossAlignment.center,
                        alignment: WrapAlignment.start,
                        spacing: 30,
                        children: [
                          InkWell(
                            onTap: () {
                              controller.isAll.value = !controller.isAll.value;
                            },
                            child: Obx(
                              () => Text.rich(TextSpan(children: [
                                WidgetSpan(
                                    child: SizedBox(
                                      width: 20,
                                      height: 20,
                                      child: CustomPaint(
                                        painter: _MyRadio(checked: controller.isAll.value),
                                      ),
                                    ),
                                    alignment: PlaceholderAlignment.middle),
                                TextSpan(
                                    text: ' 全选',
                                    style:
                                        StylesUtils.customTextStyle(color: ColorsUtils.color3333))
                              ])),
                            ),
                          ),
                          InkWell(
                            onTap: () {},
                            child: Text(
                              '一键清空',
                              style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                            ),
                          )
                        ],
                      ),
                    )),
                    TextButton(
                        onPressed: () {},
                        style: ButtonStyle(
                          padding: const MaterialStatePropertyAll(EdgeInsets.zero),
                          minimumSize: const MaterialStatePropertyAll(Size(115, 50)),
                          shape: const MaterialStatePropertyAll(LinearBorder()),
                          backgroundColor: MaterialStatePropertyAll(
                              ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048)),
                          alignment: Alignment.center,
                        ),
                        child: Text(
                          '删除',
                          style: StylesUtils.customTextStyle(),
                        ))
                  ],
                ),
              ),
            ),
          ),
        ));
  }
}

class _MyRadio extends CustomPainter {
  bool checked;

  _MyRadio({this.checked = false});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048)
      ..style = PaintingStyle.fill
      ..strokeWidth = 1;
    if (checked) {
      canvas.drawCircle(Offset(size.width / 2, size.height / 2), 5, paint);
    }
    paint.style = PaintingStyle.stroke;
    canvas.drawCircle(Offset(size.width / 2, size.height / 2), size.width / 2, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return this != oldDelegate;
  }
}
